<template>
    <!-- 对话框表单 -->
    <!-- 建议使用 Prettier 格式化代码 -->
    <!-- el-form 内可以混用 el-form-item、FormItem、ba-input 等输入组件 -->
    <el-dialog :close-on-click-modal="false" :model-value="['Add', 'Edit'].includes(baTable.form.operate!)"
        @close="baTable.toggleForm" width="90%" style="height: 90vh" top="5vh">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ baTable.form.operate ? t(baTable.form.operate) : '' }}
            </div>
        </template>

        <div v-if="baTable.form.operate == 'Add'">
            <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar" style="height: 70vh">
                <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'"
                    :style="config.layout.shrink ? '' : 'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'">
                    <el-form v-if="!baTable.form.loading" ref="formRef" @submit.prevent=""
                        @keyup.enter="baTable.onSubmit(formRef)" :model="baTable.form.items"
                        :label-position="config.layout.shrink ? 'top' : 'right'"
                        :label-width="baTable.form.labelWidth + 'px'" :rules="rules">
                        <el-divider content-position="left">账号设置</el-divider>
                        <FormItem :label="t('technician.list.tel')" type="string" v-model="baTable.form.items!.tel"
                            prop="tel" :placeholder="t('Please input field', { field: t('technician.list.tel') })" />
                        <FormItem :label="t('technician.list.password')" type="string"
                            v-model="baTable.form.items!.password" prop="password"
                            :placeholder="t('Please input field', { field: t('technician.list.password') })" />
                        <el-divider content-position="left">技师信息</el-divider>
                        <FormItem :label="t('technician.list.technician_name')" type="string"
                            v-model="baTable.form.items!.technician_name" prop="technician_name"
                            :placeholder="t('Please input field', { field: t('technician.list.technician_name') })" />
                        <FormItem :label="t('technician.list.sex')" type="radio" prop="sex" :input-attr="{ step: 1 }"
                            v-model.number="baTable.form.items!.sex"
                            :placeholder="t('Please input field', { field: t('technician.list.sex') })"
                            :data="{ content: { 1: '男', 2: '女' } }" />
                        <FormItem :label="t('technician.list.birthday')" type="date"
                            v-model="baTable.form.items!.birthday" prop="birthday"
                            :placeholder="t('Please select field', { field: t('technician.list.birthday') })" />

                        <FormItem :label="t('technician.list.practice_time')" type="date"
                            v-model="baTable.form.items!.practice_time" prop="practice_time"
                            :placeholder="t('Please select field', { field: t('technician.list.practice_time') })" />
                        <!--                        <FormItem :label="t('technician.list.intention_city_id')" type="remoteSelect"-->
                        <!--                                  v-model="baTable.form.items!.intention_city_id" prop="intention_city_id"-->
                        <!--                                  :input-attr="{ pk: 'ba_platform_area.city_id', field: 'city_name', 'remote-url': '/admin/platform.OpenArea/index' }"-->
                        <!--                                  :placeholder="t('Please select field', { field: t('technician.list.intention_city_id') })"/>-->
                        <FormItem :label="t('technician.list.address')" type="string"
                            v-model="baTable.form.items!.address" prop="address"
                            :placeholder="t('Please input field', { field: t('technician.list.address') })" />

                        <FormItem :label="t('technician.list.brief_introduction')" type="editor"
                            v-model="baTable.form.items!.brief_introduction" prop="brief_introduction"
                            @keyup.enter.stop="" @keyup.ctrl.enter="baTable.onSubmit(formRef)"
                            :placeholder="t('Please input field', { field: t('technician.list.brief_introduction') })" />
                        <FormItem :label="t('technician.list.IDCard')" type="string"
                            v-model="baTable.form.items!.IDCard" prop="IDCard"
                            :placeholder="t('Please input field', { field: t('technician.list.IDCard') })" />
                        <FormItem :label="t('technician.list.IDCard_imgs')" type="images"
                            v-model="baTable.form.items!.IDCard_imgs" prop="IDCard_imgs"
                            :placeholder="t('Please input field', { field: t('technician.list.IDCard_imgs') })" />
                        <FormItem :label="t('technician.list.qualifications')" type="images"
                            v-model="baTable.form.items!.qualifications" prop="qualifications"
                            :placeholder="t('Please input field', { field: t('technician.list.qualifications') })" />
                        <FormItem :label="t('technician.list.avatar')" type="image" v-model="baTable.form.items!.avatar"
                            prop="avatar"
                            :placeholder="t('Please input field', { field: t('technician.list.avatar') })" />
                        <FormItem :label="t('technician.list.health_imgs')" type="images"
                            v-model="baTable.form.items!.health_imgs" prop="health_imgs"
                            :placeholder="t('Please input field', { field: t('technician.list.health_imgs') })" />
                        <!-- 使用了 el-time-picker -->
                        <FormItem label="健康证生效日期" type="date" v-model="baTable.form.items!.health_start_time" />
                        <FormItem label="健康证截至日期" type="date" v-model="baTable.form.items!.health_end_time" />


                        <FormItem :label="t('technician.list.work_imgs')" type="images"
                            v-model="baTable.form.items!.work_imgs" prop="work_imgs"
                            :placeholder="t('Please input field', { field: t('technician.list.work_imgs') })" />

                        <FormItem :label="t('营业执照')" type="images" v-model="baTable.form.items!.business_license_img"
                            prop="business_license_img" :placeholder="t('Please input field', { field: t('营业执照') })" />

                        <FormItem label="虚拟订单数量" type="number" v-model="baTable.form.items!.service_order_virtually_num"
                            prop="service_order_virtually_num"
                            :placeholder="t('Please input field', { field: '虚拟订单量' })" />
                        <FormItem label="显示虚拟订单量" type="radio" v-model="baTable.form.items!.is_show_virtually_num"
                            prop="is_show_virtually_num" :data="{ content: { 0: '隐藏', 2: '展示' } }" />
                        <FormItem :label="t('technician.list.is_go_work')" type="radio"
                            v-model="baTable.form.items!.is_go_work" prop="is_go_work"
                            :data="{ content: { 1: '上班', 2: '下班' } }" />
                        <FormItem :label="t('technician.list.is_travel')" type="radio" prop="is_travel"
                            :input-attr="{ step: 1 }" v-model.number="baTable.form.items!.is_travel"
                            :data="{ content: { 0: '需支付出行费', 1: '免出行费用' } }"
                            :placeholder="t('Please input field', { field: t('technician.list.is_travel') })" />
                        <FormItem :label="t('technician.list.status')" type="radio" v-model="baTable.form.items!.status"
                            prop="status" :data="{ content: { 1: '正常', 2: '禁用' } }"
                            :placeholder="t('Please select field', { field: t('technician.list.status') })" />
                    </el-form>

                </div>
            </el-scrollbar>
        </div>


        <div v-else>

            <el-row>
                <el-col :span="5">
                    <div class="demo-image__preview">
                        <el-image style="width: 100px; height: 100px" :src="fullUrl(baTable.form.items!.avatar)"
                            :zoom-rate="1.2" :max-scale="7" :preview-src-list="[fullUrl(baTable.form.items!.avatar)]"
                            :min-scale="0.2" :initial-index="4" fit="cover" />
                    </div>
                    <h4>ID：{{ baTable.form.items!.technician_id }}</h4>
                    <h4>姓名：{{ baTable.form.items!.technician_name }}</h4>
                    <h4>手机号：{{ baTable.form.items!.tel }}</h4>
                    <h4>入驻时间：{{ baTable.form.items!.create_time }}</h4>
                    <h4>余额：<span style="color: red;font-size: 20px">{{ baTable.form.items!.money }}</span>
                    </h4>
                </el-col>
                <el-col :span="16">
                    <el-tabs v-model="activeName" type="card" class="demo-tabs">
                        <el-tab-pane label="基础信息" name="first">
                            <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar"
                                style="height: 65vh">
                                <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'"
                                    :style="config.layout.shrink ? '' : 'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'">
                                    <el-form v-if="!baTable.form.loading" ref="formRef" @submit.prevent=""
                                        @keyup.enter="baTable.onSubmit(formRef)" :model="baTable.form.items"
                                        :label-position="config.layout.shrink ? 'top' : 'right'"
                                        :label-width="baTable.form.labelWidth + 'px'" :rules="rules">
                                        <el-divider content-position="left">账号设置</el-divider>
                                        <FormItem :label="t('technician.list.tel')" type="string"
                                            v-model="baTable.form.items!.tel" prop="tel"
                                            :placeholder="t('Please input field', { field: t('technician.list.tel') })" />
                                        <FormItem :label="t('technician.list.password')" type="string"
                                            v-model="baTable.form.items!.password" prop="password"
                                            :placeholder="t('Please input field', { field: t('technician.list.password') })" />
                                        <el-divider content-position="left">技师信息</el-divider>
                                        <FormItem :label="t('technician.list.technician_name')" type="string"
                                            v-model="baTable.form.items!.technician_name" prop="technician_name"
                                            :placeholder="t('Please input field', { field: t('technician.list.technician_name') })" />
                                        <FormItem :label="t('technician.list.sex')" type="radio" prop="sex"
                                            :input-attr="{ step: 1 }" v-model.number="baTable.form.items!.sex"
                                            :placeholder="t('Please input field', { field: t('technician.list.sex') })"
                                            :data="{ content: { 1: '男', 2: '女' } }" />
                                        <FormItem :label="t('technician.list.birthday')" type="date"
                                            v-model="baTable.form.items!.birthday" prop="birthday"
                                            :placeholder="t('Please select field', { field: t('technician.list.birthday') })" />

                                        <FormItem :label="t('technician.list.practice_time')" type="date"
                                            v-model="baTable.form.items!.practice_time" prop="practice_time"
                                            :placeholder="t('Please select field', { field: t('technician.list.practice_time') })" />
                                        <!--                                        <FormItem :label="t('technician.list.intention_city_id')" type="remoteSelect"-->
                                        <!--                                                  v-model="baTable.form.items!.intention_city_id"-->
                                        <!--                                                  prop="intention_city_id"-->
                                        <!--                                                  :input-attr="{ pk: 'ba_platform_area.city_id', field: 'city_name', 'remote-url': '/admin/platform.OpenArea/index' }"-->
                                        <!--                                                  :placeholder="t('Please select field', { field: t('technician.list.intention_city_id') })"/>-->
                                        <FormItem :label="t('technician.list.address')" type="string"
                                            v-model="baTable.form.items!.address" prop="address"
                                            :placeholder="t('Please input field', { field: t('technician.list.address') })" />

                                        <FormItem :label="t('technician.list.brief_introduction')" type="editor"
                                            v-model="baTable.form.items!.brief_introduction" prop="brief_introduction"
                                            @keyup.enter.stop="" @keyup.ctrl.enter="baTable.onSubmit(formRef)"
                                            :placeholder="t('Please input field', { field: t('technician.list.brief_introduction') })" />
                                        <FormItem :label="t('technician.list.IDCard')" type="string"
                                            v-model="baTable.form.items!.IDCard" prop="IDCard"
                                            :placeholder="t('Please input field', { field: t('technician.list.IDCard') })" />
                                        <FormItem :label="t('technician.list.IDCard_imgs')" type="images"
                                            v-model="baTable.form.items!.IDCard_imgs" prop="IDCard_imgs"
                                            :placeholder="t('Please input field', { field: t('technician.list.IDCard_imgs') })" />
                                        <FormItem :label="t('technician.list.qualifications')" type="images"
                                            v-model="baTable.form.items!.qualifications" prop="qualifications"
                                            :placeholder="t('Please input field', { field: t('technician.list.qualifications') })" />
                                        <FormItem :label="t('technician.list.avatar')" type="image"
                                            v-model="baTable.form.items!.avatar" prop="avatar"
                                            :placeholder="t('Please input field', { field: t('technician.list.avatar') })" />
                                        <FormItem :label="t('technician.list.health_imgs')" type="images"
                                            v-model="baTable.form.items!.health_imgs" prop="health_imgs"
                                            :placeholder="t('Please input field', { field: t('technician.list.health_imgs') })" />
                                        <FormItem label="健康证生效日期" type="date"
                                            v-model="baTable.form.items!.health_start_time" />
                                        <FormItem label="健康证截至日期" type="date"
                                            v-model="baTable.form.items!.health_end_time" />

                                        <FormItem :label="t('technician.list.work_imgs')" type="images"
                                            v-model="baTable.form.items!.work_imgs" prop="work_imgs"
                                            :placeholder="t('Please input field', { field: t('technician.list.work_imgs') })" />
                                        <FormItem :label="t('营业执照')" type="images"
                                            v-model="baTable.form.items!.business_license_img"
                                            prop="business_license_img"
                                            :placeholder="t('Please input field', { field: t('营业执照') })" />

                                        <FormItem label="虚拟订单数量" type="number"
                                            v-model="baTable.form.items!.service_order_virtually_num"
                                            prop="service_order_virtually_num"
                                            :placeholder="t('Please input field', { field: '虚拟订单量' })" />
                                        <FormItem label="显示虚拟订单量" type="radio"
                                            v-model="baTable.form.items!.is_show_virtually_num"
                                            prop="is_show_virtually_num" :data="{ content: { 0: '隐藏', 2: '展示' } }" />
                                        <FormItem :label="t('technician.list.is_go_work')" type="radio"
                                            v-model="baTable.form.items!.is_go_work" prop="is_go_work"
                                            :data="{ content: { 1: '上班', 2: '下班' } }" />
                                        <FormItem :label="t('technician.list.is_travel')" type="radio" prop="is_travel"
                                            :input-attr="{ step: 1 }" v-model.number="baTable.form.items!.is_travel"
                                            :data="{ content: { 0: '需支付出行费', 1: '免出行费用' } }"
                                            :placeholder="t('Please input field', { field: t('technician.list.is_travel') })" />
                                        <FormItem :label="t('technician.list.status')" type="radio"
                                            v-model="baTable.form.items!.status" prop="status"
                                            :data="{ content: { 1: '正常', 2: '禁用' } }"
                                            :placeholder="t('Please select field', { field: t('technician.list.status') })" />

                                    </el-form>

                                </div>
                            </el-scrollbar>
                        </el-tab-pane>
                        <el-tab-pane label="服务记录" name="second">
                            <ServuceLog :technician_id="baTable.form.items!.technician_id" />
                        </el-tab-pane>
                        <el-tab-pane label="已关联服务" name="third">
                            <Service :technician_id="baTable.form.items!.technician_id" />
                        </el-tab-pane>
                        <el-tab-pane label="余额修改记录" name="fourth">
                            <balance-edit-log :technician_id="baTable.form.items!.technician_id" />
                        </el-tab-pane>
                        <el-tab-pane label="评价记录" name="evaluate">
                            <EvaluateLog :technician_id="baTable.form.items!.technician_id" />
                        </el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-row>


        </div>

        <template #footer v-if="baTable.form.operate == 'Add' || activeName == 'first'">
            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
                <el-button @click="baTable.toggleForm()">{{ t('Cancel') }}</el-button>
                <el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)"
                    type="primary">
                    {{
                        baTable.form.operateIds && baTable.form.operateIds.length > 1 ? t('Save and edit next item') :
                            t('Save')
                    }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance, FormItemRule } from 'element-plus'
import { inject, reactive, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import FormItem from '/@/components/formItem/index.vue'
import Service from './service.vue'
import { useConfig } from '/@/stores/config'
import type baTableClass from '/@/utils/baTable'
import { buildValidatorData } from '/@/utils/validate'
import { fullUrl } from "/@/utils/common";
import ServuceLog from "./servuceLog.vue";
import BalanceEditLog from "/@/views/backend/technician/list/balanceEditLog.vue";
import EvaluateLog from "./EvaluateLog.vue";

const config = useConfig()
const formRef = ref<FormInstance>()
const baTable = inject('baTable') as baTableClass

const activeName = ref('first')

const { t } = useI18n()
watch(() => baTable.form.operate, () => {
    if (baTable.form.operate === 'Add') {
        baTable.form.items!.sex = 1
        baTable.form.items!.is_show_virtually_num = 0
        baTable.form.items!.is_go_work = 1
        baTable.form.items!.status = 1
        baTable.form.items!.is_travel = 0
    }

})

watch(() => baTable.form.items, () => {
    if (baTable.form.items!.password) {
        baTable.form.items!.password = ""
    }
})
const rules: Partial<Record<string, FormItemRule[]>> = reactive({

})
</script>

<style scoped lang="scss">
.demo-image__error .image-slot {
    font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
    font-size: 30px;
}

.demo-image__error .el-image {
    width: 100%;
    height: 200px;
}

h4 {
    margin-top: 10px;
}
</style>
